<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
	<!-- <link rel="icon" href=""> -->
	<title>移动端SOP页面</title>
	<meta content="yes" name="apple-touch-fullscreen">
	<meta content="yes" name="apple-mobile-web-app-capable">
    <link rel="stylesheet" href="/static/wework/h5/css/format.css">
	<style>
		body{
			background: #f8f8f8;
		}
		/*公共列表部分*/
		.public_PeopleList_container{
			background: #fff;
		}
		.public_PeopleList_header_container{
			display: flex;
			align-items: center;
			padding-top: .32rem;
			padding-left: .32rem;
		}
		.public_PeopleList_header_container svg{
			width: .35rem;
			height: .35rem;
		}
		.public_PeopleList_header_container p{
			font-size: .28rem;
			color: #2c2c2c;
		}
		.public_PeopleList_main_container{

		}
		.public_PeopleList_main_content{

		}
		.public_PeopleList_main_content li{
			padding: .35rem .32rem .32rem .32rem;
			border-bottom: 1px solid #f8f8f8;
		}
		/*sop*/
		.mobileSendSOP_Header_container{
			background: #fff;
			margin-bottom: .2rem;
			padding: .32rem;
		}
		.mobileSendSOP_listHeader_container{
			display: flex;
			align-items: center;
		}
		.mobileSendSOP_Tips_container{
			background: #f1f8ff;
			border: 1px solid #cbe5fc;
			padding: .24rem;
		}
		.mobileSendSOP_Tips_container p{
			color: #111;
			font-size: .26rem;
		}
		.mobileSendSOP_title_container{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: .22rem 0;
		}
		.mobileSendSOP_title_container span{
			color: #000;
			font-size: .3rem;
			font-weight: bold;
			position: relative;
			padding-left: .2rem;
		}
		.mobileSendSOP_title_container span::before{
			content: "";
			position: absolute;
			left: 0;
			top: .06rem;
			width: .08rem;
			height: .3rem;
			background: #4090fe;
		}
		.mobileSendSOP_titleRight_container{
			display: flex;
			align-items: center;
		}
		.mobileSendSOP_titleRight_container input{

		}
		.mobileSendSOP_titleRight_container p{
			font-size: .28rem;
			color: #333;
		}
		.mobileSendSOP_remind_container{
			background: #f1f8ff;
			padding: .1rem 0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: .26rem;
			color: #333;
		}
		.mobileSendSOP_remind_container p span{
			color: #3a92f6;
		}
		.mobileSendSOP_listFooter_container{
			/*display: flex;*/
			align-items: center;
			margin-top: .1rem;
		}
		.mobileSendSOP_listFooter_container p{
			flex: 1;
			color: #333;
			padding-right: .2rem;
			font-size: .28rem;
		}
		.mobileSendSOP_listOther_container{
			display: flex;
			justify-content: flex-end;
		}
		.mobileSendSOP_listOther_container{
			margin-top: .2rem;
		}
		.mobileSendSOP_listHeader_container img{
			width: 1rem;
			height: 1rem;
			border-radius: 4px;
		}
		.mobileSendSOP_listHeader_container a{
			
		}

		.public_copyButton{
			font-size: .24rem;
			color: #207df5;
			background: #edf6fe;
			border:1px solid #d7e8fc;
			padding: 0 .13rem;
			border-radius: 3px;
			height: .5rem;
			line-height: .5rem;
			cursor: pointer;
		}
		/**/
		.public_PeopleList_mainInfo_container{
			flex: 1;
			display: flex;
			flex-direction: column;
			padding-left: .24rem;
			height: 1rem;
			justify-content: space-around;
		}
		.public_PeopleList_mainInfo_container p:first-child{
			font-size: .30rem;
			color: #000;
			font-weight: bold;
		}
		.public_PeopleList_mainInfo_container p{
			color: #999999;
			font-size: .24rem;
		}
		.public_PeopleList_footer_container{
			padding: .32rem;
		}
		.public_PeopleList_footer_container p{
			font-size: .28rem;
			color: #999;
			text-align: center;
		}
	</style>

</head>
<body>
	<div class="mobileSendSOP_Header_container">
		<div class="mobileSendSOP_Tips_container">
			<p>管理员设置了推送任务，提醒你给客户发送消息。</p>
		</div>
		<div class="mobileSendSOP_title_container">
			<span>客户详情</span>
		</div>
		<div class="mobileSendSOP_remind_container">
			<p>{$user}</p>
		</div>
	</div>
	<div class="public_PeopleList_container">
		<div class="mobileSendSOP_title_container">
			<span>推送详情</span>
		</div>
		<div class="public_PeopleList_main_container">
			<ul class="public_PeopleList_main_content">
				<li>
					<div class="mobileSendSOP_listFooter_container">
					    <p>{$rule_data["send_content"]["text"]}<a class="public_copyButton copySvg" style="float: right" data-clipboard-text='{$rule_data["send_content"]["text"]}'>复制文本</a></p><br>
					    {foreach($rule_data["send_content"]["content"] as $value)}
                            {if $value["type"] == 1}
						图片：
                                <p><img src="{$value['url']}" style="width: 100px;height: 100px;"><a class="public_copyButton copySvg" style="float: right" data-clipboard-text="{$value['url']}">复制图片</a></p><br>
                            {/if}
                            {if $value["type"] == 2}
						链接：
                               	<p>{$value["link_url"]}<a class="public_copyButton copySvg" style="float: right" data-clipboard-text="{$value['link_url']}">复制连接</a></p><br>
                            {/if}
					    {/foreach}
					</div>
				</li>
			</ul>
		</div>
		<div class="public_PeopleList_footer_container">
			<p>没有更多了~</p>
		</div>
	</div>
	<script src="/static/wework/h5/layui/layui.all.js"></script>
	<script src="/static/wework/h5/layui/layui.js"></script>
	<script src="/static/wework/h5/js/clipboard.js"></script>
	<script src="/static/wework/h5/js/ajax.js"></script>
	<script>
		var clipboard = new ClipboardJS('.copySvg');

		clipboard.on('success', function(e) {
			layer.msg('复制成功');
		});

		clipboard.on('error', function(e) {
			console.error('Action:', e.action);
			console.error('Trigger:', e.trigger);
		});

	</script>
</body>
</html>
